<%-- 
    Document   : ProductPage
    Created on : 2014/4/23, 上午 10:04:18
    Author     : Gjun
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>玩公仔</title>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../cloud-zoom/cloud-zoom.1.0.2.min.js"></script> 
<link type="text/css" href="../cloud-zoom/cloud-zoom.css" rel="stylesheet" media="screen" /> 
<script type="text/javascript" src="../thickbox/thickbox-compressed.js"></script> 
<link type="text/css" href="../thickbox/thickbox.css" rel="stylesheet" media="screen" /> 
<link type="text/css" href="/playdoll/css/Base.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" type="text/css" href="../css/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="../js/jquery.fancybox.js"></script>


<style type="text/css"> 
body {  margin:0; 
		padding:0;
		font: 100%/1.4 '標楷體',Verdana, Arial, Helvetica, sans-serif;	
		background-color: #000000;			
	 }
.container  {width:85%;
			 max-width: 1260px;/* 建議您使用最大寬度，如此版面在大型螢幕上就不致於過寬，讓行保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			 min-width: 780px;/* 建議您使用最小寬度，如此版面在大型螢幕上就不致於過窄，讓行在側欄中保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			 margin: 0 auto; /* 兩側的自動值與寬度結合後，版面便會置中對齊。如果將 .container 的寬度設為 100%，就不需要這麼做。 */
			 color: #333333;
			 font-size: 14px;
			 text-align: justify;}

.header {display:block;}			 
			 
.wrappers { 
		   width:324px; 
		   height:484px; 
	  	   border:5px solid #ccc; 
		   background:#ddd;		   
		   <!--float:left;-->
		   		   
		 }
		   
.content {
		  width:600px;
		  height:650px;
		  margin-left:0px;
		  float:right;		  
		  
}
		   
.cloud-zoom {display:block; 
			 width:320px; 
			 height:480px;}
			 
.thickbox {
		 width:322px;
		 height:484px;
		 <!--margin:3px 0 3px 0;
		 float:left;-->
		}
#astyle {
		 width:335px;
		 height:160px;
		 margin:0;
		}

 </style> 
 <style type="text/css">
                /*登入燈箱*/       
                
		.fancybox-custom .fancybox-skin {
			box-shadow: 0 0 50px #222;
		}

		
	
</style>
</head> 

<body> 
	<div class="container">
	
		<div class="header">
	         <%@include  file="../WebTool/Top_bar.jsp" %>
		 <%@include  file="../WebTool/Logo.jsp" %>
		
                
		<!--END Header --></div>
                     
		<div class="thickbox">
			<div class="wrappers">
                            <script type="text/javascript">
					$(function(){
                                                $("#log").click(function(){
                                                     alert("請先登入!");
                                                 });

                                 $(".mousetrap").live("click", function(){
					$('#zoom1').click();
						});
					
                                        });
				</script>
                            
                            <a id="zoom1" class="thickbox cloud-zoom" href="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=640&y=960&pp=1" rel="adjustX:10, adjustY:-4"> 
				<img src="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=320&y=480&pp=1" title="" ></a> 
<!-- END WRAPPERS --></div>
			<div id="astyle">	
				<a  class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=320&y=480&pp=1'" href="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=640&y=960&pp=1"><img src="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=107&y=160&pp=1"></a>
				<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=320&y=480&pp=2'" href="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=640&y=960&pp=2"><img src="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=107&y=160&pp=2"></a>
				<a class="cloud-zoom-gallery" rel="useZoom: 'zoom1', smallImage: '../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=320&y=480&pp=3'" href="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=640&y=960&pp=3"><img src="../WebTool/GetPicwithzoom.jsp?pid=${pt["id"]}&x=107&y=160&pp=3"></a>
			</div>	
<!-- END thickbox --></div>	

	<div class="content">
			<table border=1>
				<tr style="font-size:2em;color:#ffffff;font-style:bold;"><td>${pt["name"]}</td></tr>
				<tr style="font-size:1.5em;color:#FF0000;text-align:center;"><td>商品種類 &nbsp: &nbsp${pt["type"]} &nbsp&nbsp&nbsp&nbsp單價 &nbsp:&nbsp ${pt["price"]}&nbsp&nbsp </td></tr>
				<tr style="font-size:1.2em;color:#ffffff;"><td>
				
				${pt["description"]}
				</td></tr>
				<tr><td>
                                        
                                    <% if(session.getAttribute("User")==null){ %>
                                <a style=" text-decoration: none; margin-left:250px;" class="fancybox fancybox.iframe" id="log" href="../Login/LoginPart.jsp">
                                    <img style="width:65px;height:65px; "src="../images/shoppingcart.png" title="登入後才能將商品加入購物車喔!" />
                                </a>
                                <% } else {%>
                                <a  style="margin-left:250px;" id="check" href="addToCart?id=${pt["id"]}"><img style="width:65px;height:65px;"src="../images/shoppingcart.png" title="把商品加入購物車"/></a>
                                        <% } %>
						
					</td></tr>
                                       
			</table>
		
		<!-- END CONTENT --></div>

        <%@include  file="../WebTool/Footer.jsp" %>
	
<!-- END CONTAINER --></div>

</body>
</html>
